<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('SystemName')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-system_name" data-rule="required" class="form-control" name="row[system_name]" type="text" value="">
        </div>
    </div>

    <div class="form-group row">
        <label class="control-label col-xs-12 col-sm-2">{:__('DNS模版规则')}:</label>
        <div class="col-xs-12 col-sm-8">
            <dl class="fieldlist" data-template="eventtpl" data-name="row[porkbun]">
                <dd class="">
                    <div class="" style="padding-left: 5px; padding-right: 5px;margin-top: 10px;overflow: hidden;">
                        <i aria-label="图标: question-circle-o" class="anticon anticon-question-circle-o _2wLtsf1H" style="float: left;width: 5%;">
                            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
                        </i>
                        <p style="width: 95%;">主机记录就是域名前缀，常见用法有：
                            www：解析后的域名为www.aliyun.com。
                            mail：将域名解析为mail.aliyun.com，通常用于解析邮箱服务器。
                            <br/>
                            二级域名：如：abc.aliyun.com，填写abc。
                            手机网站：如：m.aliyun.com，填写m。
                        </p>
                    </div>
                </dd>
                <dd class="">
                    <div class="" style="padding-left: 5px; padding-right: 5px;margin-top: 10px;overflow: hidden;">
                        <i aria-label="图标: question-circle-o" class="anticon anticon-question-circle-o _2wLtsf1H" style="float: left;width: 5%;">
                            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
                        </i>
                        <p style="width: 95%;">记录类型常见写法有：
                            A：将域名指向一个IPV4地址。
                            MX：将域名指向邮件服务器地址。
                            CNAME：将域名指向另外一个域名。
                            <br/>
                            TXT：文本长度限制512，通常做SPF记录（反垃圾邮件）。
                            NS：将子域名指定其他DNS服务器解析。
                            AAAA：将域名指向一个IPV6地址。
                            <br/>
                            SRV：记录提供特定的服务的服务器。
                            CAA：CA证书颁发机构授权校验。
                        </p>
                    </div>
                </dd>
                <dd class="">
                    <div class="" style="padding-left: 5px; padding-right: 5px;margin-top: 10px;overflow: hidden;">
                        <i aria-label="图标: question-circle-o" class="anticon anticon-question-circle-o _2wLtsf1H" style="float: left;width: 5%;">
                            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
                        </i>
                        <p style="width: 95%;">记录值是指：
                            <br/>
                            记录的答案内容。
                            请从域管理控制台查看 DNS 管理弹出窗口，以了解每种记录类型的正确格式
                            默认为1.1.1.1
                            禁止提交相同的记录值
                        </p>
                    </div>
                </dd>

                <dd class="text-bold">API类型:porkbun</dd>
                <dd>
                    <ins>{:__('主机记录')}</ins>
                    <ins>{:__('类型')}</ins>
                    <ins>{:__('记录值')}</ins>
                    <ins>{:__('记录时间')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('添加')}</a></dd>
                <textarea name="row[porkbun]" style="display: none" class="form-control" cols="30" rows="5">[{"id":"1"}]</textarea>
            </dl>
            <dl class="fieldlist" data-template="eventtpl2" data-name="row[godaddy]">
                <dd class="text-bold">API类型:godaddy</dd>
                <dd>
                    <ins>{:__('主机记录')}</ins>
                    <ins>{:__('类型')}</ins>
                    <ins>{:__('IP')}</ins>
                    <ins>{:__('记录时间')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('添加')}</a></dd>
                <!--请注意 dd和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
                <textarea name="row[godaddy]" style="display: none" class="form-control" cols="30" rows="5">[{"id":"1"}]</textarea>
            </dl>
            <dl class="fieldlist" data-template="eventtpl3" data-name="row[namesilo]">
                <dd class="text-bold">API类型:namesilo</dd>
                <dd>
                    <ins>{:__('主机记录')}</ins>
                    <ins>{:__('类型')}</ins>
                    <ins>{:__('记录值')}</ins>
                    <ins>{:__('记录时间')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('添加')}</a></dd>
                <textarea name="row[namesilo]" style="display: none" class="form-control" cols="30" rows="5">[{"id":"1"}]</textarea>
            </dl>
            <dl class="fieldlist" data-template="eventtpl4" data-name="row[namecheap]">
                <dd class="text-bold">API类型:namecheap</dd>
                <dd>
                    <ins>{:__('主机记录')}</ins>
                    <ins>{:__('类型')}</ins>
                    <ins>{:__('记录值')}</ins>
                    <ins>{:__('记录时间')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('添加')}</a></dd>
                <textarea name="row[namecheap]" style="display: none" class="form-control" cols="30" rows="5">[{"id":"1"}]</textarea>
            </dl>
            <script id="eventtpl" type="text/html">
                <dd class="form-inline">
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][name]" class="form-control" value="" placeholder="主机记录"/></ins>
                    <ins>
                        <select name="<%=name%>[<%=index%>][type]" data-rule="required" class="form-control selectpicker">
                            <option value="A" selected >A</option>
                            <option value="MX" >MX</option>
                            <option value="CNAME" >CNAME</option>
                            <option value="TXT" >TXT</option>
                            <option value="NS" >NS</option>
                            <option value="AAAA" >AAAA</option>
                            <option value="SRV" >SRV</option>
                            <option value="CAA" >CAA</option>
                        </select>
                    </ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][info]" class="form-control" value="" placeholder="记录值"/></ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][ttl]" class="form-control" value="300" placeholder="记录时间"/></ins>
                    <!--下面的两个按钮务必保留-->
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                    <!--<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>-->
                </dd>
            </script>
            <script id="eventtpl2" type="text/html">
                <dd class="form-inline">
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][name]" class="form-control" value="" placeholder="主机记录"/></ins>
                    <ins>
                        <select name="<%=name%>[<%=index%>][type]" data-rule="required" class="form-control selectpicker">
                            <option value="A" selected >A</option>
                            <option value="MX" >MX</option>
                            <option value="CNAME" >CNAME</option>
                            <option value="TXT" >TXT</option>
                            <option value="NS" >NS</option>
                            <option value="AAAA" >AAAA</option>
                            <option value="SRV" >SRV</option>
                            <option value="CAA" >CAA</option>
                        </select>
                    </ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][ip]" class="form-control" value="" placeholder="IP"/></ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][ttl]" class="form-control" value="300" placeholder="记录时间"/></ins>
                    <!--下面的两个按钮务必保留-->
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                    <!--<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>-->
                </dd>
            </script>
            <script id="eventtpl3" type="text/html">
                <dd class="form-inline">
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][name]" class="form-control" value="" placeholder="主机记录"/></ins>
                    <ins>
                        <select name="<%=name%>[<%=index%>][type]" data-rule="required" class="form-control selectpicker">
                            <option value="A" selected >A</option>
                            <option value="AAAA" >AAAA</option>
                            <option value="MX" >MX</option>
                            <option value="CNAME" >CNAME</option>
                            <option value="TXT" >TXT</option>
                        </select>
                    </ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][info]" class="form-control" value="" placeholder="记录值"/></ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][ttl]" class="form-control" value="300" placeholder="记录时间"/></ins>
                    <!--下面的两个按钮务必保留-->
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                    <!--<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>-->
                </dd>
            </script>
            <script id="eventtpl4" type="text/html">
                <dd class="form-inline">
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][name]" class="form-control" value="" placeholder="主机记录"/></ins>
                    <ins>
                        <select name="<%=name%>[<%=index%>][type]" data-rule="required" class="form-control selectpicker">
                            <option value="A" selected >A</option>
                            <option value="AAAA" >AAAA</option>
                            <option value="MX" >MX</option>
                            <option value="CNAME" >CNAME</option>
                            <option value="TXT" >TXT</option>
                        </select>
                    </ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][info]" class="form-control" value="" placeholder="记录值"/></ins>
                    <ins><input type="text" data-rule="required" name="<%=name%>[<%=index%>][ttl]" class="form-control" value="300" placeholder="记录时间"/></ins>
                    <!--下面的两个按钮务必保留-->
                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                    <!--<span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>-->
                </dd>
            </script>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="0">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
